<!--
 * @Author: ChunLai
 * @Date: 2023-03-17 11:58:04
 * @LastEditTime: 2023-12-19 20:50:26
 * @Description: 必读pdf文件
 * @FilePath: \01.latest-short-insure\src\views\sign\components\protocols\MustReadPdf.vue
-->
<template>
  <div class="must_read_md">
    <div
      v-for="(item, index) in lists"
      class="protocol"
      :key="`pdf${item.id}_must${index}`"
      @click="openPdfPop(item)"
    >
      <div class="notice_img">
        <span class="check_img" v-if="item.isFinish"></span>
      </div>
      <div class="clause_ul">
        <i>本人已逐页阅读并同意</i> <em>{{ getFileName(item.fileName) }}</em>
      </div>
    </div>

    <PdfFileDisplay
      ref="cfgFilePop"
      @handleClick="closePopFile"
      v-if="showFile"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import PdfFileDisplay from "@/components/PdfFileDisplay";
export default {
  name: "MustReadPdf",
  data() {
    return {
      showFile: false,
    };
  },
  components: { PdfFileDisplay },
  computed: {
    ...mapGetters({
      lists: "readings/pdfMustReadLists",
    }),
  },
  created() {},
  mounted() {},
  methods: {
    getFileName(name) {
      let res = name;
      if (name && name.indexOf("《") == -1) {
        res = `《${name}》`;
      }
      return res;
    },
    openPdfPop(item) {
      this.showFile = true;
      this.$nextTick(() => {
        this.$refs.cfgFilePop.initModule(item.fileUrl);
      });
    },
    closePopFile(pdfUrl) {
      this.$store.dispatch("readings/setItemPdfFinish", pdfUrl);
      this.showFile = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import "./style.less";
</style>
